<template>
  <div id="app1">
       <!-- 路由：通过互联网把信息从源地址传输到目的地的活动 -->
       <!-- 路由表：本质上就是一个映射表 -->
       <!-- 第一步：安装路由 npm i vue-router  -->
       <!-- 配置路由，要在项目中创建一个router的文件夹 -->
       <!-- 在router文件夹内新建一个index.js文件 -->

       <!-- router-view 就是路由要加载的页面 -->
       <!-- to属性  表示跳转的路径 -->
       <!-- tag属性 修改routerlink标签的样式  默认是a标签展示 -->
       <!-- replace属性 不保留历史记录 -->
       <!-- active-class属性 设置一个类名 跳转到当前路由时就会添加   -->
       <router-link to="/home" tag="button" replace  active-class="active">首页</router-link>
       <router-link to="/my_file" replace active-class="active">我的</router-link>
       <input type="text" v-model="userName">
       <button>首页</button>
       <button @click="aboutClick">关于</button>
       <button @click="categoryClick">分类</button>
       <keep-alive exclude="Category">
        <router-view></router-view>
       </keep-alive>
       

       <!-- 我们正常打包文件 会生成两个JS文件  
       一个是 app.xxxxx.js  自己开发时编写的js代码 
       一个是 chunk-vendors.xxxxx.js 打包所有第三方使用的js及我们打包所有的底层代码

       我们所有的编写的js代码都放在app.xxxx.js中 这样这个文件会变得很大。影响页面的加载

       所以路由我们一般使用懒加载的形式来加载组件，这样打包之后会将每一个懒加载的路由组件单独
       打包成一个js文件，当路由加载到该组件时，才会引入加载js文件，从而提高首次加载速度
        -->

      <!-- 
        路由的传值
          1. 动态路由传值  可以通过params来进行传值，这种方式传值当页面刷新时，数据不会丢失
          2. 静态路由也可以通过params来进行传值，但是页面一刷新 该值就是丢失
          3. 静态路由 可以通过query来进行传值，而且刷新页面数据不会丢失
       -->
      <!-- 
         activated()
         deactivated()
         只在被keep-alive 包裹起来的组件内有效
         表示处于活跃状态 和 失去活跃状态的两个阶段

         keep-alive  可以缓存当前的路由组件  如果某些路由组件不希望被缓存
         可以在 keep-alive 标签上 添加一个 exclude 属性  值直接写不希望缓存的组件名即可
       -->
  </div>
</template>
<script>
export default {
  name: 'App1',
  components: {
    
  },
  data(){
    return {
      userName : "张三"
    }
  },
  methods: {
    aboutClick(){
      // $router.push()  可以实现路由的跳转  会产生历史记录的跳转
      // this.$router.push('/my_file')
       // $router.replace()  可以实现路由的跳转  不会产生历史记录的跳转
      this.$router.push({
        name:'my_file',
        query:{
          us:this.userName
        }
      });

    },
    categoryClick(){
      this.$router.push("/category/" + this.userName)
    }
  },
  beforeCreate() {
    
  },
  created() {
    
  },
  beforeMount() {
    
  },
  mounted() {
    
  },
  beforeUpdate() {
    
  },
  updated() {
    
  },
  beforeDestroy() {
    
  },
  destroyed() {
    
  },
  
  

}
</script>

<style>
#app1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.active{
  color: red;
  font-weight: bold;
}
</style>
